import { useEffect, useState } from 'react'
import { Button, Checkbox, Form, Input } from 'antd';
import '../assets/css/login.less'
import { Administrator } from '../apis/administrator/type';
import { authCode } from '../apis/auth/auth';
import { checkLogin } from '../apis/administrator/administrator';
import { useNavigate } from 'react-router';

function Login(): JSX.Element {

    const navigate = useNavigate();

    const [form] = Form.useForm();
    const onFinish = async (values: Administrator) => {

        const res = await checkLogin({ ...values, token: user?.token });
        console.log("登录成功",res);
        sessionStorage.setItem("token",res.token)
        navigate("/");

    }
    const [user, setUser] = useState<Administrator>();
    const [imgSrc, setImgSc] = useState<string>("")
    const getVerifyCode = async () => {

        const res = await authCode();
        setUser({ ...user, token: res.token })
        setImgSc(res.imageCode);

    }

    useEffect(() => {

        getVerifyCode();

    }, [])


    return (
        <div className='login-body'>


            <Form className='login-form'
                name="basic"
                labelCol={{ span: 4 }}
                onFinish={onFinish}
                autoComplete="off"
                initialValues={user}
                form={form}
            >
                <Form.Item<Administrator>
                    label="账号"
                    name="username"
                    rules={[{ required: true, message: '请输入账号!' }]}
                >
                    <Input />
                </Form.Item>
                <Form.Item<Administrator>
                    label="密码"
                    name="pass"
                    rules={[{ required: true, message: '请输入密码!' }]}
                >
                    <Input.Password autoComplete="off"  />
                </Form.Item>

                <Form.Item label="验证码" >
                   
                   <div  style={{display:"flex",alignItems:"center"}}>
                <Form.Item<Administrator>
                    label=""
                    name="verifyCode"
                    rules={[{ required: true, message: '请输入图形验证码!' }]}
                >
                    <Input style={{width:"150px"}} />
                    
                </Form.Item>
                <img style={{width:"100px"}} onClick={getVerifyCode} src={imgSrc} alt="" />
             
                </div>
                </Form.Item>

            
                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>

                </Form.Item>

            </Form>

        </div>
    )
}
export default Login;

